<template>
	<view class="page">
		<view class="page-top">
			<view class="page-user">
				<view class="page-user-info">
					<image style="width:120rpx ;height: 100%;" src="../../static/user.png" mode=""></image>
					<view class="" style="flex: 1;margin-left: 50rpx;" v-if="user">
						<view style="color: #fff;">17630221741</view>
						<view style="margin-top: 20rpx;color: #fff;font-size: 26rpx;display: flex;align-items: center;">
							账户余额:￥16888
							<view class="chongzhi" @click="recharge">
								立即充值
							</view>
						</view>
					</view>
					<view style="flex: 1;margin-left: 50rpx;color: #fff;line-height: 50rpx;" @click="login" v-else>
						立即登录
					</view>
				</view>

			</view>
		</view>
		<view class="my-list">
			<view
				style="padding: 20rpx;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;"
				@click="goOrder">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/dingdan.png" style="width: 45rpx;height: 45rpx;" mode=""></image>
					<text style="margin-left: 10rpx;font-size: 24rpx;">我的订单</text>
				</view>
				<u-icon name="arrow-right" color="#707070" size="16" style='margin-top: 4rpx;float: right;'></u-icon>
			</view>
			<view class="line"></view>
			<view
				style="padding: 20rpx;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;"
				@click="goAdvance">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/yuyue.png" style="width: 45rpx;height: 45rpx;" mode=""></image>
					<text style="margin-left: 10rpx;font-size: 24rpx;">我的预约</text>
				</view>
				<u-icon name="arrow-right" color="#707070" size="16" style='margin-top: 4rpx;float: right;'></u-icon>
			</view>
			<view class="line"></view>
			<view
				style="padding: 20rpx;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;"
				@click="logout">
				<view class="" style="display: flex;align-items: center;">
					<image src="../../static/dingdan.png" style="width: 45rpx;height: 45rpx;" mode=""></image>
					<text style="margin-left: 10rpx;font-size: 24rpx;">退出登录</text>
				</view>
				<u-icon name="arrow-right" color="#707070" size="16" style='margin-top: 4rpx;float: right;'></u-icon>
			</view>
		</view>
		<u-popup :show="show" @close="close" :closeOnClickOverlay='false' safeAreaInsetBottom closeable>
			<view style="height: 600rpx;padding: 30rpx;">
				<text>充值：</text>
				<view style="display: flex;justify-content: space-between;">
					<u--input placeholder="请输入充值金额" border="surround" v-model="money" style='margin-top: 100rpx;'></u--input>
				</view>
				<view class="addMoney" @click="add">
					立即充值
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: null,
				show: false,
				money:''
			}
		},
		onShow() {
			//每次进入 页面判断是否登录，是则请求数据更新余额
			let userInfo = uni.getStorageSync('user')
			if (userInfo) {
				this.user = userInfo
			}
		},
		methods: {
			// 我的订单
			goOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			// 我的预约
			goAdvance() {
				uni.navigateTo({
					url: '/pages/advance/advance'
				})
			},
			//登录
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})

			},
			//退出登录
			logout() {
				uni.removeStorageSync('user')
				this.user = null
				uni.navigateBack()
			},
			// 充值
			recharge(){
				this.show = true
			},
			// 关闭充值
			close() {
				this.show = false
				this.money = ''
			},
			
			//充值
			add(){
				//调用充值接口 并清除
				
				this.close()
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #F4F4F4;
		height: 89vh;
	}

	.page-top {
		width: 100%;
		height: 500rpx;
		background: -webkit-linear-gradient(#6B83FF, 40%, #B1BEFF, 70%, #E3E8FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#6B83FF, 40%, #B1BEFF, 70%, #E3E8FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#6B83FF, 40%, #B1BEFF, 70%, #E3E8FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(#6B83FF, 40%, #B1BEFF, 70%, #E3E8FF);
		overflow: hidden;
		border-radius: 0 0 100rpx 100rpx;
	}

	.page-user {
		width: 100%;
		height: 140rpx;
		margin-top: 160rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.page-user-info {
		/* width: 360rpx; */
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.my-list {
		width: 92%;
		background-color: #fff;
		height: 260rpx;
		margin: 0 auto;
		margin-top: -120rpx;
		border-radius: 26rpx;
	}

	.line {
		width: 95%;
		margin: 0 auto;
		height: 1rpx;
		background-color: #ccc;
	}

	.chongzhi {
		overflow: hidden;
		border-radius: 40rpx;
		border: 1px solid #fff;
		width: 160rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 26rpx;
		margin-left: 30rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}
	.addMoney  {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
		border-radius: 40rpx;
		width: 400rpx;
		height: 90rpx;
		background-color:#6B83FF ;
		margin: 0 auto;
		margin-top: 200rpx;
	}
</style>
